<template>
    <div class="my-orders">
      <h2>我的订单</h2>
      <el-row :gutter="20">
        <el-col :span="12" v-for="order in orders" :key="order.id">
          <el-card class="order-card">
            <div slot="header">
              <span>订单号：{{ order.id }}</span>
            </div>
            <div class="order-content">
              <span>商品：{{ order.product }}</span>
              <span>数量：{{ order.quantity }}</span>
              <span class="price">{{ '¥' + order.totalPrice }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <p v-if="orders.length === 0">暂无订单</p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElRow, ElCol, ElCard } from 'element-plus';
  
  const orders = ref([
    { id: 1, product: '手机', quantity: 1, totalPrice: 1999 },
    { id: 2, product: '电视', quantity: 1, totalPrice: 3999 },
    { id: 3, product: '手机', quantity: 1, totalPrice: 1999 },
    { id: 4, product: '电视', quantity: 1, totalPrice: 3999 }
  ]);
  </script>
  
  <style scoped>
  .my-orders {
    padding: 20px;
  }
  .order-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }
  .price {
    float: right;
    font-weight: bold;
    color: #f56c6c;
  }
  .order-content {
    padding: 20px;
  }
  </style>
  